<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
import {
  onAddToFavorites,
  onHide,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onShow,
  onUnload
} from "@dcloudio/uni-app";
import {conUtils} from "../utils/conUtils";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import {BaseImgUrl, Version, BaseURL} from "../utils/lshttp";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {cancelGFOrderAPI, doGFOrderAPI, getRemarkAPI} from "../services/order";
import {useOrderInfoStore} from "../stores/modules/orderInfo";
import Gfphone from "../pages/shopdetail/gfphone.vue";
import Gfothergoods from "../pages/shopdetail/gfothergoods.vue";
import {getBuToPagePath, getToPagePath, toMiniAppBusiness, toMiniAppRedPage, toMiniAppSearch} from "../utils/utils";
import LszbgDowload from "../components/LszbgDowload.vue";
/* #ifdef H5 */
import jweixin from "weixin-js-sdk";
import {getAdCallBackAPI} from "../services";
import CacheImage from "../components/CacheImage.vue";
/* #endif */
const orderInfoStore = useOrderInfoStore()
const commonInfoStore = useCommonInfoStore()
const userInfoStore = useUserInfoStore()

const shop = ref()
const activity = ref([])
const tabIndex = ref(0)
const activity_item = ref()
const signUpData = ref()
const resShow = ref(false)
const qdTip = ref(false)
const takeMoney = ref(0)
const shopID = ref()
const activity_rules = ref([])
const gfPhone = ref()
const mtPhone = ref()
const lsPhone = ref()
const qdType = ref(0)
const isH5 = ref(false)
const shopDetailLoading = ref(false)
const orderShareShow = ref(false) //订单分享进来是否弹出提示
// 判断官返店铺是否审核，并给出要求提示，通过后台控制是否显示，默认为0
const remarkRem = ref({})
const getRemarkData = async () => {
  let res = await getRemarkAPI({
    version: Version,
  })
  remarkRem.value = res.result
  console.log("getRemarkData==", remarkRem.value)
}
onLoad((options) => {
  console.log("ShopDetail = ", options)
  getRemarkData()
  shopDetailLoading.value = true
  // #ifdef H5
  commonInfoStore.initJSDKConfig()
  isH5.value = true
  // #endif
  conUtils("options", options)
  tabIndex.value = parseInt(options['activeIndex'])
  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel();
  // 给分享按钮默认值
  shareIconBtn.value = options.planType

  eventChannel.emit('acceptDataFromOpenedPage', {
    data: 'data from test page'
  });
  eventChannel.emit('someEvent', {
    data: shop.value
  });
  eventChannel.emit('dataChange', {
    data: shop.value
  });
  eventChannel.on('itemGf', function (data) {
    console.log('item-dataGf', data)
    data.name = data.shop_name
    shop.value = data
    console.log('shopGf', shop.value)
    notice.value = shop.value.success_notice
    getDetails()
  })
  // 非官返店铺详情页面的分享朋友圈报错“店铺ID必须”问题,是因为获取的shopId参数为空，所以这里手动设置
  if (options.shopId){
    shopID.value = options.shopId
  } else {
    shopID.value = options.wmPoiId
  }

})
onShow(() => {
  conUtils("onShow1", userInfoStore.userInfo.mt_phone)
  conUtils("onShow2", userInfoStore.userInfo.username)
  mtPhone.value = userInfoStore.userInfo.mt_phone
  lsPhone.value = userInfoStore.userInfo.username
  console.log('平台信息=', uni.getDeviceInfo())
  // 跳转美团领红包返回，qdSuccess为 true，则跳转到下单流程页面
  if (qdSuccess.value) {
    qdSuccess.value = false
    // 跳转订单流程页面
    uni.navigateTo({
      url: "/pages_shopdetail/shop_process_gf?shopGF=" + encodeURIComponent(JSON.stringify(signUpData.value)) + "&signUp=2"
    })
  }
  // 微信H5分享指示图事件
  shareClick()
  /* 获取用户信息 */
  getUserInfo()
})
const getDetails = async () => {
  activity.value.member_commission = shop.value.member_commission
  activity.value.commission = shop.value.general_commission
  activity.value.planActivityType = shop.value.planActivityType
  activity.value.percent = shop.value.percent

  if (activity.value.length > 0) {
    setBtnStatus(tabIndex.value)
  }
}
const setBtnStatus = (index) => {
  activity_item.value = activity.value[index]
  console.log('activity_item=', activity_item.value)
  setMoneyShare()
}
// 通过切换活动来判断分享按钮是否显示
const shareIconBtn = ref('')
// tab切换
const handleChangeTabs = (item, Index) => {
  tabIndex.value = Index
  setBtnStatus(Index)
  console.log('item=', item)
  shareIconBtn.value = item.planActivityType
}
// 进群
const jinqun = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  uni.navigateTo({
    url: '/pages/share/vipgroup'
  })
}
// 开通VIP
const toVIP = () => {
  uni.navigateTo({url: "/pagesme/vip/vip"});
}
// 会员
const goVip = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  /* uni.navigateTo({
    url: '/pages/member/member'
  }) */
  uni.reLaunch( {
    url: '/pages/index/index'
  })
}
// 邀请好友赢奖励
const toMakeMoney = () => {
  uni.reLaunch({url: '/pages/makemoney/makemoney'})
}
// 加入内部福利群
const toVipGroup = () => {
  uni.navigateTo({url: "/pages/share/vipgroup"});
}
// 用户信息
const userInfo = ref()
const getUserInfo = async () => {
  console.log("获取用户信息:", userInfoStore.userInfo)
  userInfo.value = userInfoStore.userInfo
}
const knowshow = ref(false)
const orderData = ref({
  poiEventId: "",
  meituanPvId: "",
  do_ratio: "",
  max_commission: "",
  shop_name: "",
  picture: "",
  is_comment: "",
  dpUrl: "",
  lpUrl: "",
  wxPath: "",
  wxAppid: "",
  wxAppOrgid: "",
  deliveryTimeTip: "",
  deliveryDistance: "",
  client: "小程序", //
})
// 不领红包跳转商家
const tiaoZhuanMT = async (data) => {
  // doOrder()
  if (!userInfoStore.isLogin()) {
    return
  }
  // 调用绑定美团手机号弹窗
  if (!gfPhone.value.hasTel()) {
    await uni.showToast({title: "请绑定美团手机号", icon: "none"})
    return
  }
  // 广告平台返回值callback提交到后台
  if (commonInfoStore.callback){
    await getAdCallBackAPI({
      callback: commonInfoStore.callback,
      eventType: 'shop_gf'
    })
  }
  orderData.value.poiEventId = activity_item.value?.poiEventId
  orderData.value.meituanPvId = shop.value?.meituanPvId
  orderData.value.do_ratio = activity_item.value?.ratio
  orderData.value.max_commission = activity_item.value?.maxCommission
  orderData.value.shop_name = shop.value?.name
  orderData.value.picture = shop.value?.picture
  orderData.value.is_comment = activity_item.value?.planActivityType
  orderData.value.dpUrl = shop.value?.actionUrl?.dpUrl
  orderData.value.lpUrl = shop.value?.actionUrl?.lpUrl
  orderData.value.wxPath = shop.value?.actionUrl?.wxPath
  orderData.value.wxAppid = shop.value?.actionUrl?.wxAppid
  orderData.value.wxAppOrgid = shop.value?.actionUrl?.wxAppOrgid
  orderData.value.deliveryTimeTip = shop.value?.deliveryTimeTip // 配送时长
  orderData.value.deliveryDistance = shop.value?.deliveryDistance // 配送距离
  orderData.value.actualLatitude = commonInfoStore?.addressDel?.lat
  orderData.value.actualLongitude = commonInfoStore?.addressDel?.lng
  orderData.value.city = commonInfoStore?.addressDel?.city
  orderData.value.plan_id = activity_item.value?.plan_id
  // #ifdef APP-PLUS
  let platform = uni.getDeviceInfo().platform;
  orderData.value.client = platform === 'ios' ? '苹果APP' : platform === 'android' ? '安卓APP' : "其他"
  // #endif
  // #ifdef H5
  orderData.value.client = "H5"
  // #endif
  // console.log('官返报名提交数据res=', orderData.value, commonInfoStore?.addressDel)

  const res = await doGFOrderAPI(orderData.value, commonInfoStore?.addressDel)
  console.log('官返报名数据res=', res.result)
  signUpData.value = res.result
  uni.showToast({title: "报名成功", icon: "success", duration: 1500})
  setTimeout(() => {
    uni.navigateTo( {
      url: "/pages_shopdetail/shop_process_gf?shopGF=" + encodeURIComponent(JSON.stringify(signUpData.value)) + "&signUp=1"
    })
  }, 1000)
}
// 领红包跳转商家
const tiaoZhuanMTRed = () => {
  doOrder()
}

const doOrder = async () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  if (!gfPhone.value.hasTel()) {
    await uni.showToast({title: "请绑定美团手机号", icon: "none"})
    return
  }
  // 广告平台返回值callback提交到后台
  if (commonInfoStore.callback){
    await getAdCallBackAPI({
      callback: commonInfoStore.callback,
      eventType: 'shop_gf'
    })
  }
  orderData.value.poiEventId = activity_item.value?.poiEventId
  orderData.value.meituanPvId = shop.value?.meituanPvId
  orderData.value.do_ratio = activity_item.value?.ratio
  orderData.value.max_commission = activity_item.value?.maxCommission
  orderData.value.shop_name = shop.value?.name
  orderData.value.picture = shop.value?.picture
  orderData.value.is_comment = activity_item.value?.planActivityType
  orderData.value.dpUrl = shop.value?.actionUrl?.dpUrl
  orderData.value.lpUrl = shop.value?.actionUrl?.lpUrl
  orderData.value.wxPath = shop.value?.actionUrl?.wxPath
  orderData.value.wxAppid = shop.value?.actionUrl?.wxAppid
  orderData.value.wxAppOrgid = shop.value?.actionUrl?.wxAppOrgid
  orderData.value.deliveryTimeTip = shop.value?.deliveryTimeTip // 配送时长
  orderData.value.deliveryDistance = shop.value?.deliveryDistance // 配送距离
  orderData.value.actualLatitude = commonInfoStore?.addressDel?.lat
  orderData.value.actualLongitude = commonInfoStore?.addressDel?.lng
  orderData.value.city = commonInfoStore?.addressDel?.city
  orderData.value.plan_id = activity_item.value?.plan_id
  // #ifdef APP-PLUS
  let platform = uni.getSystemInfoSync().platform;
  orderData.value.client = platform === 'ios' ? '苹果APP' : platform === 'android' ? '安卓APP' : "其他"
  // #endif
  // #ifdef H5
  orderData.value.client = "H5"
  // #endif
  const res = await doGFOrderAPI(orderData.value, commonInfoStore?.addressDel)
  // 报名成功后的数据
  signUpData.value = res.result
  qdSuccess.value = true
  //显示抢单须知
  knowshow.value = true
  // 刷新订单
  orderInfoStore.setIsRefresh(true)
  // 比例是否异常
  if (res.result?.is_abnormal === 1) {
    isAbnormal.value = true
    activity_item.value.commission = res.result.commission
    activity_item.value.member_commission = res.result.member_commission
    notice.value = res.result.notice
    userEventId.value = res.result.userEventId
    return
  }
  await djsToMeiTuan(1)
}
const userEventId = ref()
// 抢单须知
const notice = ref()
// 比例是否异常
const isAbnormal = ref(false)
// 异常的订单号
const orderID = ref()
// 取消异常订单
const cancelAbnormalOrder = async () => {
  await cancelGFOrderAPI(userEventId.value, "")
  // 重置异常
  isAbnormal.value = false
  knowshow.value = false
  await uni.showToast({title: "订单取消成功"})
}

const copyShow = ref(false)
const count = ref(2)
const time = ref()
onUnload(() => {
  clearTime()
})
onHide(() => {
  clearTime()
})
onShow(() => {
  clearTime()
})
const clearTime = () => {
  if (time.value) {
    clearInterval(time.value)
    count.value = 3
  }
}
const djsToMeiTuan = async (type) => {
  // #ifdef H5
  if (isH5) {
    return
  }
  // #endif
  // 异常无需自动跳转
  if (isAbnormal.value) {
    return
  }
  if (time.value) {
    clearInterval(time.value)
    count.value = 3
  }
  time.value = setInterval(async () => {
    conUtils("2222222222222222", type)
    count.value = count.value - 1
    if (count.value <= 0) {
      clearInterval(time.value)
      if (type === 0 && isClose.value) {
        await doMeiTuanAndQiangDan()
      } else if (type === 1 && isClose.value) {
        await goShop()
      } else if (isClose.value) {
        conUtils("1111111111111")
        await goMeiTuanSearch()
      }
      isClose.value = true
      count.value = 1
    }
  }, 1000)
}
const isClose = ref(true)
const showSelect = ref(false)
const showCopy = ref(false)
const isNoShow = ref(commonInfoStore.isNoShow)
const qdSuccess = ref(false)
onShow(() => {
  if (qdSuccess.value) {
    uni.switchTab({
      url: "/pages/order/order"
    })
  }
})
// 进入美团或饿了么店铺
const goShop = async () => {
  clearTime()
  if (qdType.value === 0) {
    showSelect.value = true
    onChooseList(0)
  } else {
    await doMeiTuanAndQiangDan()
  }
}
const chooseList = ref([
  {
    icon: "home", name: "小程序进店"
  },
  // {
  //   icon: "scan", name: "识别二维码进店"
  // },
  // {
  //   icon: "star", name: "复制店铺名搜索"
  // }
])
const onChooseList = (index) => {
  showSelect.value = false
  switch (index) {
    case 0:
      knowshow.value = false
      // uni.navigateToMiniProgram({
      //   appId: shop.value.actionUrl.wxAppid,
      //   path: shop.value.actionUrl.wxPath,
      // })
      toMiniAppBusiness(1, shop.value?.actionUrl?.wxPath ? shop.value?.actionUrl?.wxPath : shop.value?.action_url?.wx_mini.mt.path)
      break;
    case 1:
      uni.setClipboardData({
        data: shop.value.name,
        success() {
          uni.hideToast();
        }
      })
      if (isNoShow.value === false) {
        showCopy.value = true
        djsToMeiTuan(2) //倒计时类型搜索
      } else {
        goMeiTuanSearch()
      }
      break;
  }
}
const onClickIsNoShow = () => {
  isNoShow.value = !isNoShow.value
  conUtils("isNoShow.value", isNoShow.value)
  commonInfoStore.setIsNoShow(isNoShow.value)
}
// 监听跳转
const handleLaunch = (e) => {
  showSelect.value = false
  showCopy.value = false
  console.log("handleLaunch", e)
}
// 监听错误
const handleError = (e) => {
  console.log("handleError", e)
}
const closePop = () => {
  knowshow.value = false
  resShow.value = false
  isClose.value = false
  showCopy.value = false
}
const doMeiTuanAndQiangDan = async () => {
  resShow.value = false
  knowshow.value = false
  let redData = commonInfoStore.reward ? commonInfoStore.reward.order[0] : []
  // await uni.navigateToMiniProgram({
  //   appId: redData.appid,
  //   path: redData.path,
  //   extraData: {}
  // })
  clearTime()
  await toMiniAppRedPage(redData)
}
const goMeiTuanSearch = async () => {
  showCopy.value = false
  // const id = 'wx2c348cf579062e56';
  // const path = "packages/index/search/search";
  // console.log('店铺类型', id)
  // await uni.navigateToMiniProgram({
  //   appId: id,
  //   path: path,
  // })
  await toMiniAppSearch(1)
}
const useUser = useUserInfoStore()
const message = ref("您的好友给你推荐了（店铺名），预计花费 ￥0-5元")
const setMoneyShare = () => {
  takeMoney.value = activity_item.value.minimum_amount - activity_item.value.member_rebate_amount
  message.value = "您的好友给你推荐了（" + shop.value.name + "）"
  // commonInfoStore.setWxShareMessage("message", message.value, useUser.userInfo.id);
}
// 转发到聊天界面
onShareAppMessage(() => {
  return commonInfoStore.setWxShareMessage("message", message.value, useUser?.userInfo?.id, "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo?.id + "&source=2", shop.value.picture, 2);
})
// 转发到朋友圈
onShareTimeline(() => {
  return commonInfoStore.setWxShareMessage("friend", message.value, useUser?.userInfo?.id, "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo?.id + "&source=2", shop.value.picture, 2 );
})
// 添加到收藏
onAddToFavorites(() => {
  return commonInfoStore.setWxShareMessage("favorite", message.value, useUser?.userInfo?.id, "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo?.id + "&source=2", shop.value.picture, 2 );
})
const showBDTel = ref(false)
const bdTel = (type) => {
  if (useUser.isLogin()) {
    qdType.value = type;
    if (!useUser.userInfo.username) {
      uni.showModal({
        title: '绑定手机号-提示',
        content: '抢单需要绑定手机号，用于订单核验，和订单状态通知，是否去绑定？',
        confirmText: '去绑定',
        success: async function (res) {
          if (res.confirm) {
            await uni.navigateTo({
              url: "/pagesme/settinginfo"
            })
          }
        }
      })
      return
    }
    console.log("useUser.userInfo.mt_phone", !useUser.userInfo.mt_phone)
    if (!useUser.userInfo.mt_phone) {
      console.log("useUser.userInfo.mt_phone", useUser.userInfo.mt_phone)
      showBDTel.value = true
      gfPhone.value.openPop()
      return
    }
    mtPhone.value = userInfoStore.userInfo.mt_phone
    lsPhone.value = userInfoStore.userInfo.username
    showBDTel.value = false
    qdTip.value = true;
  }
}
const showShare = ref(false)
const currentIcon = ref("share-fill") //初始图标为分享
const intervalId = ref('') //定时器ID，用于取消定时器
const share = () => {
  // console.log('商家ID', shopID.value)
  showShare.value = true
}
const fadeImage = ref()
// 切换图标事件
const startImageCycle = () => {
  if (currentIcon.value === "share-fill"){
    currentIcon.value = "weixin-fill"
  } else {
    currentIcon.value = "share-fill"
  }
}
onMounted(async () => {
  setInterval(() => {
    startImageCycle()
  }, 3000)
  // #ifdef H5
  await wxShare()
  // #endif
})
onUnmounted(() => {
  clearInterval(intervalId.value);
})
// WEIXIN转发到聊天界面onShareAppMessage
/* onShareAppMessage((res) => {
  if (res.from === 'button'){
    //console.log('分享的触发方式=', res)
    return {
      title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的标题
      imageUrl: shop.value.picture || BaseImgUrl + "/share/share_bg.png",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id,
      type: 0, // 0=正式服，1=测试服，2=体验版
      success:function(res){
        //成功回调
        console.log("分享成功")
      }
    }
  }
}) */
// WEIXIN转发到朋友圈
const ShareTimeLine = () => {
  orderShareShow.value = true
  showShare.value = false
}
// APP分享到微信好友
const handleShareWechat = () => {
  console.log('店铺名称=', shop.value)
  uni.share({
    provider: "weixin",// 分享到的平台，例如：'weixin', 'qq', 'sinaweibo'等
    scene: "WXSceneSession",// 分享的场景，例如：'WXSceneSession'（会话），'WXSenceTimeline'（朋友圈）等
    type: 5,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo.id,
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id,
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/pages/kingeat/kingeat/?parent_id=' + userInfoStore.userInfo.id,// 如果是链接类型，则需要填写链接地址
    title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的标题
    summary: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的摘要，仅在type为2时有效
    imageUrl: shop.value.picture || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
// APP分享到朋友圈
const handleShareTimeline = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo.id ,
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id ,
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/pages/kingeat/kingeat/?parent_id=' + userInfoStore.userInfo.id,
    title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",
    summary: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",
    imageUrl: shop.value.picture || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}

const wxShareTip = ref(false)
// H5分享
const wxShare = async () => {
  await commonInfoStore.initJSDKConfig(true)
  console.log(`weqweqweqwe`)
  jweixin.ready(() => {
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    jweixin.updateAppMessageShareData({
      title: '领食周边购', // 分享标题
      desc: "本地优惠，就在领食", // 分享描述
      link: BaseURL + "/#/pages/kingeat/kingeat/?parent_id=" + userInfoStore.userInfo.id + "&applet=1" + "&source=2", // 分享链接
      imgUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    jweixin.updateTimelineShareData({
      title: '领食周边购', // 分享标题
      link: BaseURL + "/#/pages/kingeat/kingeat/?parent_id=" + userInfoStore.userInfo.id + "&applet=1" + "&source=2", // 分享链接
      imgUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
  })
  jweixin.error((res) => {
    console.log(res)
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    // getSignature()
  })
}
const h5Share = () => {
  wxShareTip.value = true
  showShare.value = false
}
// 关闭微信朋友圈分享提示
const closeOrderShareShow = () => {
  orderShareShow.value = false
}
// 微信H5分享指示图
const shareClick = () => {
  wxShareTip.value = false
}

</script>
<template>
  <u-navbar
      title="店铺详情"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
      bgColor="#FECE37"
  >
    <!--<template #left>
      <view class="content" @click="okBack">
        <u-icon v-if="applet === 0" name="arrow-left" color="#3d3d3d" size="20"></u-icon>
        <u-icon v-else name="home" color="#3d3d3d" size="26"></u-icon>
      </view>
    </template>-->
    <!-- #ifdef APP-PLUS || H5 -->
    <!--<template #right>
      <view class="top_share_box" style="padding: 10rpx" @click="share" >
        <view class="tishi_box"><text class="tishi_text">分享奖8元</text><view class="sjx"></view></view>
        <u-icon class="share_icon" :name="currentIcon" size="26" color="#0CBB2F"></u-icon>
      </view>
    </template>-->
    <!-- #endif -->
  </u-navbar>
  <u-loading-page
      :loading="!shopDetailLoading"
      icon-size="28"
      loading-mode="circle"
      loading-text="店铺加载中">

  </u-loading-page>
  <view v-if="shopDetailLoading" class="shop_big_box">
    <view class="top_bg" style="width: 100%; height: 159rpx">
      <image :src="BaseImgUrl + '/home/shop_details_top_bg.png'" mode="widthFix" style="width: 100%;height: 159rpx;"></image>
      <!--<cache-image :img-src="BaseImgUrl + '/home/shop_details_top_bg.png'" show-menu="" :isimg="true" imgMode="widthFix" :image-style="{width: '100%', height: '159rpx'}"></cache-image>-->
    </view>

    <!-- 店铺信息 -->
    <view class="shops_list" v-if="shop?.name">
      <view class="shop_list_item">
        <view class="shop_info">
          <view class="shop_mingzi">
            <view class="shop_name ellipsis-two-line">{{ shop?.name }}</view>
          </view>
          <!---->
          <view class="adress_shop">
            <text class="place_text">配送时长 : {{ shop?.deliveryTimeTip }}</text>
            <text style="height: 26rpx;margin: 6rpx 18rpx;border-right: 2rpx #EFEFEF solid"></text>
            <text class="place_text">距离 : {{ shop?.deliveryDistance || '0km' }}</text>
            <text style="height: 26rpx;margin: 6rpx 18rpx;border-right: 2rpx #EFEFEF solid"></text>
            <image  :src="BaseImgUrl + '/shop/shopdetail/shopdetail_gf_cjf.png'" style="width: 90rpx;height: 28rpx;"></image>
          </view>
        </view>
        <view class="shop_info_img" style="position: relative">
          <image v-if="shop?.picture" :src="shop?.picture" mode="widthFix" style="width: 120rpx;height: 120rpx;"></image>
          <image v-else
                 src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                 mode="widthFix" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;"></image>
          <view style="position: absolute;top: 0;margin-top: 0;right: 0">
            <image style="width: 64rpx;height: 32rpx;border-radius: 0"
                   :src="BaseImgUrl+'/guanfan/home/gf_icon1.png'"></image>
          </view>
        </view>
      </view>
      <view class="shop_list_info">
        <view class="shop_list_info_warp">
          <view style="display: flex;align-items: center;">
            <view class="shop_type">返</view>
            <view class="place_text">实付金额{{ activity.member_commission.ratio }}%</view>
          </view>
          <view style="margin-left: 10rpx;">
            <view class="place_text">最高返￥{{ activity.member_commission.maxCommission }}</view>
          </view>
          <view v-if="activity_item.planActivityType == 1" class="shop_info_warp_type" style="">图文品鉴</view>
          <view v-if="remarkRem.is_show === 0" class="shop_no_demand" style="">无需求</view>
          <view v-if="activity_item.planActivityType == 2" class="activityNum_evaluate" style="">无需评价</view>

        </view>
        <view class="shop_list_info_warp" style="justify-content: space-between">
          <view @tap="showSelect = true" class="shop_info_warp_left" style="font-size: 22rpx;color: #666666;display: flex;align-items: center;height: 60rpx;">
            <view class="shop_info_warp_left_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon01.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
            <view class="shop_info_warp_left_text" style="padding: 0 8rpx;">查看是否可配送</view>
            <view class="shop_info_warp_left_icon"><u-icon name="arrow-right" size="14" color="#666666"></u-icon></view>
          </view>
          <view  @click="commonInfoStore.toKeFu()" class="shop_info_warp_right" style="font-size: 22rpx;color: #666666;display: flex;align-items: center;height: 60rpx;">
            <view class="shop_info_warp_left_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon02.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
            <view class="shop_info_warp_left_text" style="padding: 0 8rpx;">店铺进不去？联系客服</view>
            <view class="shop_info_warp_left_icon"><u-icon name="arrow-right" size="14" color="#666666"></u-icon></view>
          </view>
        </view>
      </view>
      <view class="shop_list_info" style="background: #F0FFF2;border-radius: 0 0 20rpx 20rpx;">
        <view class="shop_list_info_warp" style="display: flex;align-items: center; justify-content: center; ">
          <view class="shop_list_info_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon03.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
          <view class="shop_list_info_text" style="font-size: 24rpx;color: #2FA82B;">100%真实返现 ● 优惠叠加 ● 品质保证 ● 售后无忧</view>
        </view>
      </view>
      <!--<view class="shifupeisong">
        <view class="icons_box">
          <view class="copy_icon" @tap="onChooseList(1)">复制店铺名</view>
          <view class="ps_icon" style="flex: 1;align-items: center" @tap="showSelect = true">查看可否配送</view>
          <view class="sb_icon" style="flex: 1;align-items: center" @click="commonInfoStore.toKeFu()">
            失败上报
            <up-button
                @click="commonInfoStore.toKeFu()"
                type="primary"
                color="#ffffff"
                shape="circle"
                :customStyle="{padding: '6rpx',margin: 0}"
                icon="https://lsz.lszbg.com/imgs/old/sb_icon.png"
                size="mini">
              <text style="color: #666;font-size: 26rpx;margin-left: 10rpx;margin-top: 2rpx">失败上报
              </text>
            </up-button>
          </view>
        </view>
      </view>-->
    </view>
    <!-- 多个活动 -->
    <view class="actives_box">
      <!--<view class="tabs_t">
        <text v-for="(item, index) in activity" :class="tabIndex === index ? 'cur':''"
              @tap="handleChangeTabs(item, index)"
              :key="item.id">活动{{ index + 1 }}
        </text>
      </view>-->
      <view class="actives_title">
        <view class="actives_title_text">
          <text class="actives_title_text_t" style="font-size: 30rpx;color: #333333;">返现活动要求</text>
          <text class="actives_title_text_b" style="font-size: 24rpx;color: #CECECE;padding-left: 20rpx;">先抢名额后下单</text>
        </view>
        <view class="actives-line">
          <view class="actives-line-l"></view>
          <view class="actives-line-c"><u-line color="#E1E1E1" :dashed="true"></u-line></view>
          <view class="actives-line-r"></view>
        </view>
      </view>
      <!--美团手机号-->
      <view class="mt_phone">
        <gfphone ref="gfPhone" :tel="userInfo.mt_phone" @cancel="showBDTel=false"></gfphone>
      </view>
      <view class="actives_content">
        <view class="actives_content_item">
          <view class="actives_item_left">平台</view>
          <view class="actives_item_right">
            <view class="actives_item_icon">
              <image  :src="BaseImgUrl + '/shop/shop_meituan.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
            </view>
            <text class="actives_item_text">美团</text>
            <text class="actives_item_text">剩余名额</text>
            <text class="actives_item_text" style="color: #FE7B21;">{{ activity_item?.inventory }}</text>
            <text class="actives_item_text">份</text>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left" style="padding-top: 40rpx;">返利</view>
          <view class="actives_item_right">
            <view class="actives_item_icon">
              <image v-if="userInfo.is_member === 1" :src="BaseImgUrl + '/shop/shop_detail_icon04.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
              <image v-else :src="BaseImgUrl + '/shop/shop_detail_icon05.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
            </view>
            <text v-if="userInfo.is_member === 0" class="actives_item_text">
              开通会员，本单可多返 {{ (activity_item?.member_commission.maxCommission - activity_item?.commission.maxCommission).toFixed(2) }}%
            </text>
            <text v-if="userInfo.is_member === 1" class="actives_item_text">您是会员用户</text>
            <view v-if="userInfo.is_member === 0" @tap="goVip" class="actives_open_member">立即开通</view>
          </view>
        </view>
        <view class="actives_content_item" style="margin-top: -20rpx;">
          <view class="actives_item_left" style="width: 60rpx;"></view>
          <view class="actives_item_right" style="color: #333333;">
            <text class="actives_item_text">本单返实付金额</text>
            <text class="actives_item_text" style="color: #FE7B21;">{{ activity_item?.member_commission.ratio }}%</text>
            <text style="width: 1rpx;height: 40rpx;background: #DCDCDC;margin: 0 10rpx;"></text>
            <text class="actives_item_text">最高返</text>
            <text class="actives_item_text" style="color: #FE7B21;">￥{{ activity_item?.member_commission.maxCommission }}</text>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left">要求</view>
          <view class="actives_item_right">
            <!--无需求-->
            <text v-if="remarkRem.is_show == 0">无需求</text>
            <!--超级返 planActivityType == 1-->
            <text v-if="activity_item?.planActivityType == 1" class="actives_item_text">需要用餐反馈</text>
            <!--试吃官-->
            <text v-if="activity_item?.planActivityType == 2" class="actives_item_text">不需要用餐反馈</text>
          </view>
        </view>
        <!--卡卷红包-->
        <!--<view class="coupon_box">
          <quan :shopID="shopID" :is-red="activity_item.is_hot_card===0" :is-p-z="activity_item.is_hot_card===1"
                v-model:red_id="red_id" v-model:card_id="card_id"></quan>
        </view>-->
      </view>
      <!--<view class="change_box" v-if="activity_item">
        &lt;!&ndash; 活动 &ndash;&gt;
        <view class="small_box">
          <view class="text_t fs_icon">份数：</view>
          <view class="bl_box">
            <view class="u-line-progress">
              <view class="progress" :style="'width:'+activity_item.percent+'%'"></view>
            </view>
            <text class="val_num" style="color: #000;width: 80px;">剩余
              <text style="color: #FBA243;font-weight: bold;">{{ activity_item.percent }}%</text>
            </text>
          </view>
        </view>
        &lt;!&ndash; 规则 &ndash;&gt;
        <view class="small_box" style="align-items: flex-start;">
          <view class="text_t yq_icon">要求：</view>
          <text class="val_text">
            {{ remarkRem.is_show === 0 ? '无需求' : activity_item.planActivityType == 1 ? remarkRem.need_assess : remarkRem.not_need_assess }}
            &lt;!&ndash;{{activity_item.activity_askactivity_ask || ''}}&ndash;&gt;
          </text>
        </view>
        &lt;!&ndash; 补贴 &ndash;&gt;
        <view class="small_box">
          <view class="text_t bt_icon">补贴：</view>
          <view>
            <view class="vip_text">会员返实付
              <text style="border-right: 6rpx">{{ activity_item.member_commission.ratio }}%</text>
              &nbsp;&nbsp;最高返
              <text>{{ activity_item.member_commission.maxCommission }}</text>
            </view>
            <view class="vip_text" style="margin-top: 10rpx">非会员返实付
              <text style="border-right: 6rpx">{{ activity_item.commission.ratio }}%</text>
              &nbsp;&nbsp;最高返
              <text>{{ activity_item.commission.maxCommission }}</text>
            </view>
          </view>
        </view>
        &lt;!&ndash;        @bindingSuccess="bdTel(qdType)"&ndash;&gt;
        <gfphone ref="gfPhone" @cancel="showBDTel=false"></gfphone>
      </view>-->
    </view>
    <!-- 商品信息 -->
    <view v-if="shop?.skuList">
      <gfothergoods :goods="shop?.skuList"></gfothergoods>
    </view>
    <!-- 会员福利 -->
    <view class="shop_vip_box">
      <view class="shop_vip_left">
        <view class="vip_title">免费激活会员</view>
        <view class="vip_subTitle">每月饭钱<text style="color: #FD6801">省300元</text></view>
        <view v-if="userInfo.is_member !== 1" @click="toVIP" class="vip_btn">立即开通</view>
        <view v-if="userInfo.is_member === 1" @click="goVip" class="vip_btn">去升级</view>
        <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img01.png'" mode="widthFix" style="width: 100%;"></image></view>
      </view>
      <view class="shop_vip_right">
        <view @click="toMakeMoney" class="shop_vip_right_item shop_vip_top">
          <view class="vip_title">邀请好友赚奖金</view>
          <view class="vip_subTitle">至多可得<text style="color: #FD6801">245元</text></view>
          <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img02.png'" mode="widthFix" style="width: 100%;"></image></view>
        </view>
        <view @click="toVipGroup" class="shop_vip_right_item shop_vip_bottom">
          <view class="vip_title">加内部福利群</view>
          <view class="vip_subTitle">每月<text style="color: #FD6801">福利领不停</text></view>
          <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img03.png'" mode="widthFix" style="width: 100%;"></image></view>
        </view>
      </view>
    </view>
    <!-- 粉丝群 -->
    <!--<vip_qun :is-mei-tuan="true"></vip_qun>-->
    <!--    <view class="fensiqun_box">
          <image :src="BaseImgUrl + '/home/qunicon.png'"></image>
          <view class="qun_info">
            <view>粉丝专属福利群</view>
            <view>进群即可
              <text>领券</text>
              享群
              <text>专属优惠</text>
            </view>
          </view>
          <view class="lijinqun" @click="jinqun()">
            立即进群
          </view>
        </view>
     VIP
        <view class="lingshi_vip" @tap="goVip">
          <image class="vip_bg" :src="BaseImgUrl + '/home/vip_bg.png'" mode="widthFix"></image>
          <view class="vip_info_box">
            <view class="vip_title">领食VIP</view>
            <view class="vip_ifno">
              <view>开通会员预计省￥10</view>
              <view>每月多省￥300</view>
            </view>
            <view class="vip_kaitong">立即开通</view>
          </view>
        </view>
     官返新添加 活动流程 -->
    <!-- 活动须知 -->
    <view class="shop_activity_must">
      <view class="shop_activity_top" style="height:30rpx;"></view>
      <view class="shop_activity_title">活动须知</view>
      <view class="shop_activity_content">
        <u-parse :content="shop?.new_activityRule" style="color: #3D3D3D;"></u-parse>
        <!--<view v-for="(item, index) in shop?.new_activityRule" :key="index">
          {{ item }}
        </view>-->
      </view>
    </view>
    <!--<view v-if="shop?.activityRule">
      <gfactivityflow :rule="shop?.new_activityRule "></gfactivityflow>
    </view>-->
  </view>
  <!-- 客服 -->
  <view v-if="shopDetailLoading" class="kefu_icon">
    <view
        @click="commonInfoStore.toKeFu()">
      <image :src="BaseImgUrl + '/home/kefu_icon.png'" mode="widthFix" style="width: 98rpx;height: 98rpx;"></image>
    </view>
  </view>
  <!--分享按钮 v-if="shareIconBtn == 1"-->
  <view  class="share_detail_box">
    <view class="share_icon" @click="share">
      <image :src="BaseImgUrl + '/share/shopdetail_share_icon01.png'" mode="widthFix" style="width: 120rpx;height: 120rpx"></image>
    </view>
  </view>

  <!-- 底部 -->
  <view v-if="shopDetailLoading" class="bottomBar">
    <!--报名流程-->
    <view class="regist_box">
      <view class="regist_item" style="width: 180rpx;">
        <view class="regist_item_icon"><image :src="BaseImgUrl + '/shop/shop_detail_icon07.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image></view>
        <view class="regist_title">报名活动</view>
      </view>
      <view class="regist_icon">
        <image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
      </view>
      <view class="regist_item" style="width: 190rpx;">
        <view class="regist_item_icon"><image :src="BaseImgUrl + '/shop/shop_meituan.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image></view>
        <view class="regist_title">去美团下单</view>
      </view>
      <view class="regist_icon">
        <image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
      </view>
      <view class="regist_item" style="width: calc(100% - 480rpx)">
        <view class="regist_item_icon"><image :src="BaseImgUrl + '/shop/shop_detail_icon09.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image></view>
        <view class="regist_title">回领食返利提现</view>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <lszbg-dowload></lszbg-dowload>
    <!-- #endif -->
    <view class="bottom-btn-zu" >
      <view class="btn-zu3" v-if="activity_item?.inventory == 0">已售罄</view>
      <view class="btn-zuwrap" v-else>
        <view class="btn-zu1"  @tap="tiaoZhuanMT(shop)">只报名</view>
      </view>
      <view class="btn-zu2" @tap="bdTel(1)">
        领红包并立即报名
        <view class="tishi_text">
          <view class="tishi_t">领红包多省3-9元并免审</view>
          <view class="tishi_bg"><image :src="BaseImgUrl + '/shop/shop_detail_icon11.png'" mode="widthFix" style="width: 280rpx;height: 56rpx;"></image></view>
        </view>
      </view>
    </view>
    <!--<view class="bottom-btn-zu" v-if="activity_item?.inventory == 0">
      <view class="btn-zu3">已售罄</view>
    </view>
    <view v-else class="bottom-btn-zu">
      <view class="btn-zuwrap">
        <view class="btn-zu1" @tap="bdTel(0)">抢单报名</view>
      </view>
      <view class="btn-zu2" @tap="bdTel(1)">
        领红包并立即抢单
      </view>
    </view>-->
  </view>
  <!--微信朋友圈分享-->
  <view class="share_box_shadow" v-if="orderShareShow" @click="closeOrderShareShow">
    <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
  </view>
  <!-- #ifdef H5 -->
  <!--微信H5分享指示图-->
  <view class="share_box_shadow" v-if="wxShareTip" @click="shareClick">
    <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
  </view>
  <!-- #endif -->
  <!--分享按钮弹窗-->
  <up-popup :show="showShare" mode="bottom" @close="showShare = false" closeable round="10">
    <view class="share_box">
      <view class="share_top">
        <view class="share_top_bg"><image :src="BaseImgUrl + '/share/share_top_bg.png'" mode="widthFix" style="width: 100%;"></image></view>
        <view class="share_top_warp">
          <view class="share_top_warp_title">分享店铺 赚现金奖励</view>
          <view class="share_top_warp_subtitle">每邀请 <text style="color: #FF3230">1</text> 位新用户下单，你最少可获得 <text style="color: #FF3230">3元</text> 现金奖励</view>
          <view class="share_top_warp_content">
            <view class="share_top_warp_content_item">
              <view style="position: relative;margin-top: 30rpx;color:#FA642B;min-height: 268rpx">
                <image :src="BaseImgUrl + '/share/yqjl@2x.png'"
                       style="width: 650rpx;height: 268rpx;position: absolute"></image>
                <view class="u-flex" style="position: relative;justify-content: flex-start;align-items: flex-start">
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">3</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请1人
                    </view>
                  </view>
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">5</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请2-5人
                    </view>
                  </view>
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">8</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请≥6人
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="wechat_box">
        <!-- #ifdef MP -->
        <view class="small_box">
          <button class="complete1" open-type="share">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
            </view>
            <view class="name">微信好友</view>
          </button>
        </view>
        <view class="small_box" @click="ShareTimeLine()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <view class="small_box">
          <button class="complete1" open-type="share">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
            </view>
            <view class="name">分享链接</view>
          </button>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="small_box" @click="handleShareWechat()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
          </view>
          <view class="name">微信好友</view>
        </view>
        <view class="small_box" @click="handleShareTimeline()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <!--<view class="small_box" @click="handleSavePhoto()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/upload_icon.png'"></image>
          </view>
          <view class="name">保存图片</view>
        </view>-->
        <view class="small_box" @click="handleShareWechat()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
          </view>
          <view class="name">分享链接</view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
          </view>
          <view class="name">微信好友</view>
        </view>
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
          </view>
          <view class="name">分享链接</view>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <view style="padding-bottom: env(safe-area-inset-bottom);"></view>
  </up-popup>
  <!-- 复制店名须知 -->
  <u-popup :show="copyShow" mode="center" :safeAreaInsetBottom="false" round="10" closeable @close="copyShow = false">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">复制店名须知</view>
        <view class="desc_text">
          店名复制成功，搜索下单时请仔细核对
          <text>商家名称</text>
          及
          <text>店铺地址</text>
          和
          <text>下单平台</text>
          ，避免同名店铺导致下错单给您带来无法获得补贴的影响。
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;">
          <view class="btns_box" @tap="copyShow=false">
            我知道了
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 领红包跳转通知 -->
  <u-popup :show="resShow" mode="center" :round="10" width="70%" closeable @close="closePop()">
    <view class="wm_box">
      <view class="content_boxs">
        <!-- <view class="know_t">提示</view> -->
        <view class="desc_text" style="text-align: center;margin: 40rpx 0;">
          抢单成功！即将打开小程序领取红包，领红包可享受免审核,
          <text v-if="!isH5&&!isAbnormal">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <!-- #ifdef APP-PLUS || MP-->
          <button class="btns_box" @click="doMeiTuanAndQiangDan()">允许{{ isAbnormal ? "" : count + "s" }}</button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view class="btns_box">
            允许
            <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                  :username="commonInfoStore.reward.popup[0].original_id"
                                  :path="commonInfoStore.reward.popup[0].path"
                                  style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 抢单须知 -->
  <u-popup :show="knowshow" mode="center" :round="10" width="80%" closeable @close="closePop()">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">抢单须知</view>
        <view class="desc_text">
          <u-parse :content="isAbnormal?notice:shop?.success_notice"></u-parse>
          <text v-if="!isH5&&!isAbnormal">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con"
              style="display: flex;justify-content: space-around;margin: 30rpx 20rpx;position: relative">
          <view v-if="isAbnormal">
            <view class="btns_cancel" @click="cancelAbnormalOrder">取消订单</view>
          </view>
          <view v-if="!isH5">
            <button class="btns_box" @click="goShop()">{{
                qdType === 0 ? '进入店铺' : '去领红包'
              }}{{ isAbnormal ? "" : count + "s" }}
            </button>
          </view>
          <!-- #ifdef H5 -->
          <view v-else>
            <view class="btns_box">
              {{ qdType === 0 ? '进入店铺' : '去领红包' }}
              <wx-open-launch-weapp id="launch-btn" v-if="qdType === 0" @launch="handleLaunch" @error="handleError"
                                    :username="getBuToPagePath(1)"
                                    :path="shop?.actionUrl?.wxPath ? shop?.actionUrl?.wxPath : shop?.action_url?.wx_mini.mt.path"
                                    style="position: absolute;z-index: 2;right: 0;width: 60%;height:100%;opacity: 0.01;background-color: #ff531a"
                                    :style="{width:isAbnormal ? '60%' : '100%'}">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
              <wx-open-launch-weapp id="launch-btn" v-else @launch="handleLaunch" @error="handleError"
                                    :username="commonInfoStore.reward.popup[0].original_id"
                                    :path="commonInfoStore.reward.popup[0].path"
                                    style="position: absolute;z-index: 2;right: 0;width: 60%;height:100%;opacity: 0.01;background-color: #ff531a"
                                    :style="{width:isAbnormal ? '60%' : '100%'}">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
            </view>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 是否可配送 -->
  <u-popup :show="showSelect" :round="10" mode="bottom" @close="showSelect = false" closeable>
    <view class="box-content">
      <view class="box-title">
        请选择进店方式
      </view>
      <view>
        <view
            class="box-item"
            v-for="(item, index) in chooseList"
            :key="index"
            @click="onChooseList(index)"
            style="position: relative"
        >
          <View class="icon-content1">
            <u-icon
                :name="item.icon"
                size="22"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>{{ item?.name }}</text>
            <text v-if="index===0" class="to-shop">直接进店</text>
          </view>
          <View class="icon-content">
            <u-icon
                name="arrow-right"
                size="18"
            ></u-icon>
          </View>
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn" v-if="index===0" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(1)"
                                :path="shop?.actionUrl?.wxPath ? shop?.actionUrl?.wxPath : shop?.action_url?.wx_mini.mt.path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
        </view>
      </view>
      <view style="height: 20rpx"></view>
    </view>
  </u-popup>
  <!-- 复制进店 -->
  <u-popup :show="showCopy" :round="10" mode="center" @close="closePop()" closeable :safeAreaInsetBottom="false">
    <view class="copy-content">
      <view class="top">
        <image class="top-img" :src="shop?.picture" mode="scaleToFill"></image>
        <view class="copy-content-center">
          <view class="copy-content-name">
            {{ shop?.name }}
          </view>
          <view class="vip-content">
          </view>
          <view class="address">
            <view class="adress_shop">
              <text class="place_text">配送时长 : {{ shop?.deliveryTimeTip }}</text>
              <text style="margin: 6rpx 18rpx;border-right: 2rpx #EFEFEF solid"></text>
              <text class="place_text">距离 : {{ shop?.deliveryDistance || '0km' }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="desc_text">
          店名复制成功，即将跳转去搜索，搜索下单时
          <text>请仔细核对商家名称及店铺地址和下单平台</text>
          ，
          <text>避免同名店铺</text>
          导致下错单给您带来无法获得补贴的影响。
          <text v-if="!isH5&&!isAbnormal">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <view>
            <!-- #ifdef APP-PLUS || MP-->
            <button class="btns_box1" @click="goMeiTuanSearch()">好，去搜索下单{{ count }}s</button>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view class="btns_box1">
              好，去搜索下单
              <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                    :username="getToPagePath(1)[0]"
                                    :path="getToPagePath(1)[1]"
                                    style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <!-- #ifdef APP-PLUS || MP-->
        <view class="box-item" @click="onClickIsNoShow()">
          <View class="icon-content1">
            <u-icon
                v-if="isNoShow"
                name="checkmark-circle-fill"
                color="#FC754A"
                size="18"
            ></u-icon>
            <u-icon
                v-else
                name="checkmark-circle-fill"
                color="#DDDDDD"
                size="18"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>下次不再提示，直接复制</text>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </u-popup>
  <!-- 抢单提示 -->
  <u-popup :show="qdTip" :round="10" mode="center" @close="qdTip = false" :safeAreaInsetBottom="false">
    <view class="qd-content" v-if="activity_item?.rule">
      <view class="title">
        抢单说明
      </view>
      <view v-for="(item, index) in activity_item.rule" :key="index">
        <view class="tip" :class="index === activity_item.rule.length-1 ? 'tip1' : ''">
          {{ item }}
        </view>
      </view>
      <view class="tip tip1">
        {{ activity_item.rule.length + 1 }}、本单号码:【{{ mtPhone }}】，报名手机号必须与美团登录账号一致
      </view>
      <view class="btns_con">
        <view style="flex: 1"></view>
        <button class="zbbm" @click="qdTip = false">暂不报名</button>
        <button class="submit" @click="qdTip = false;qdType===0?tiaoZhuanMT():tiaoZhuanMTRed()">确定报名</button>
      </view>
    </view>
  </u-popup>

</template>
<style lang="scss">
page {
  background-color: #F6F6F6;
}

.u-count-down {
  &__text {
    color: #ff6512 !important;
    font-size: 26rpx !important;
  }
}
</style>
<style lang="scss" scoped>
/* 头部分享css */
.top_share_box{
  position: relative;
  & .tishi_box {
    width: 170rpx;
    height: 36rpx;
    box-sizing: border-box;
    position: absolute;
    top: 18rpx;
    left: -150rpx;
    font-size: 22rpx;
    display: flex;
    .tishi_text{
      width: 130rpx;
      height: 36rpx;
      line-height: 36rpx;
      padding: 0 10rpx;
      color: #fff;
      background-color: #FC754A;
      border: 1px solid #fff;
      border-radius: 10rpx 0 0 10rpx;
    }
    .sjx{
      width: 0;
      height: 0;
      border-right: 22rpx solid transparent; /* 左侧边框透明 */
      border-left: 22rpx solid #fff; /* 右侧边框为黑色 */
      border-top: 20rpx solid transparent; /* 上侧边框透明 */
      border-bottom: 20rpx solid transparent; /* 下侧边框透明 */
    }
  }
  .share_icon{
    transition: fadeInOut 3s ease-in-out; /* 渐变效果 */
    opacity: 1;
  }
  @keyframes fadeInOut {
    0%{ opacity: 0; }
  }
}

.copy-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .bottom {
    .btns_box1 {
      width: 540rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }

    .box-item {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      width: 370rpx;
      margin: 0 auto 38rpx;
      color: #B1B1B1;
      border-radius: 16rpx;
      text-align: center;

      .icon-content1 {
        border-radius: 50%;
        padding: 6rpx;
        background: #F8F8F8;
      }

      .box-item-content-name {
        margin-left: 10rpx;
      }
    }
  }

  .top {
    background: #f8f8f8;
    border-radius: 20rpx;
    padding: 0 30rpx 30rpx;
  }

  .top-img {
    height: 200rpx;
    width: 200rpx;
    margin: 60rpx auto auto;
    border-radius: 30rpx;
  }

  .address {
    color: #888888;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .copy-content-center {
    .copy-content-name {
      padding: 30rpx 0 20rpx;
      font-size: 32rpx;
      font-weight: 600;
    }

    .vip-content {
      text-align: center;

      .vip_text {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-right: 26rpx;

        text {
          color: #FE874B;
        }
      }
    }

  }

}

.ewm-content {
  margin-top: -460rpx;
  width: 600rpx;
  height: 200rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: white;

  .top-img {
    width: 600rpx;
    height: 600rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .erm-content {
    background: white;
    border-radius: 0 0 20rpx 20rpx;

    .erm-content-name {
      background: white;
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line {
      width: 200rpx;
      background: black;
      height: 2rpx;
      margin: 0 30rpx;
    }

    .erm-content-bottom {
      display: flex;
      font-weight: 600;
      font-size: 28rpx;
      padding: 30rpx;
      align-items: center;

      .right {
        flex: 1;
      }

      .left {
        image {
          width: 180rpx;
          height: 180rpx;
          background: #f8f8f8;
          border-radius: 50%;
        }
      }
    }
  }

  .icon-content {
    text-align: center;
    width: 68rpx;
    padding: 16rpx;
    margin: 50rpx auto auto;
    background: #f2f2f2;
    border-radius: 60rpx;
  }
}

.box-content {
  background: #F8F8F8;
  border-radius: 20rpx 20rpx 0 0;

  .box-title {
    width: 100%;
    height: 130rpx;
    line-height: 130rpx;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
  }

  .box-item {
    display: flex;
    font-size: 32rpx;
    height: 120rpx;
    line-height: 120rpx;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin: 0 30rpx 30rpx 30rpx;
  }

  .box-item-content-name {
    flex: 1;
    text-align: left;
  }

  .to-shop {
    background: #FC4106;
    color: white;
    border-radius: 5rpx;
    font-size: 22rpx;
    margin-left: 10rpx;
    padding: 2rpx 6rpx;
  }

  .icon-content1 {
    border-radius: 50%;
    padding: 10rpx;
    margin: 0 30rpx 0 30rpx;
    background: #F8F8F8;
  }

  .icon-content {
    margin: 0 20rpx;
  }
}
/* 客服css */
.kefu_icon {
  position: fixed;
  right: 5rpx;
  bottom: 300rpx;
  z-index: 1111;

  image {
    width: 98rpx;
  }
}
/* 分享按钮css */
.share_detail_box{
  position: fixed;
  right: 5rpx;
  top: 50%;
  z-index: 1111;
}
.shop_big_box {
  padding-bottom: 280rpx;
  width: 100%;
  height: auto;
  //border-radius: 60rpx 60rpx 0rpx 0rpx;
  overflow: hidden;
  position: relative;

  .top_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;

    image {
      width: 100%;
    }
  }
}
/* 店铺详情css */
.shops_list {
  width: 93%;
  margin: 30rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  position: relative;

  .shifupeisong {
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;
    color: #666;
    font-size: 24rpx;

    .icons_box {
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .copy_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .ps_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }
      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          height: 30rpx;
          position: relative;
          top: -5rpx;
        }
      }
    }
  }

  .pijiangonggao {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 45rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .shop_dizhi {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 56rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .manjian_box {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
    border-top: 1px solid #EEEEEE;
    font-size: 24rpx;

    .man_tag {
      background-color: #F97632;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    view {
      margin-right: 20rpx;
    }

    text {
      color: #FF6433;
    }
  }

  .shop_list_item {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: flex-start;

    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 20rpx;
    }

    .shop_info {
      flex: 1;

      .adress_shop {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20rpx;

        .place_text {
          font-size: 24rpx;
          color: #888888;
          font-weight: 300;
          margin-left: 10rpx;
          line-height: 44rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .shop_type {
          display: inline-block;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }

        .elemtag {
          background-color: #17aeff;
          color: #ffffff;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }
      }

      .shop_mingzi {
        display: flex;
        align-items: flex-start;

        .shop_name {
          padding-left: 10rpx;
          //word-break: break-all;
          //display: -webkit-box;
          // -webkit-line-clamp: 1;
          //-webkit-box-orient: vertical;
          //overflow: hidden;
          font-weight: bold;
          flex: 1;
        }
      }

      .yysjandejuli_box {
        display: flex;
        align-items: center;
        margin: 24rpx 0 0 0;
        font-size: 24rpx;

        .yysj_text {
          background-color: #f1f1f1;
          border-radius: 8rpx;
          padding: 10rpx 6rpx;
          font-size: 20rpx;
          text-align: center;
        }

        .shop_juli {
          color: #555555;
          padding-left: 20rpx;
          font-size: 24rpx;
        }
      }

      .shop_yuliang {
        display: flex;
        align-items: center;

        .jindutiao {
          flex: 1;
        }

        .shengyu {
          padding-left: 20rpx;
          color: #FF6433;
          font-size: 24rpx;
        }
      }
    }
    .shop_info_img{
      width: 120rpx;
      height: 120rpx;
      position: relative;
      border-radius: 20rpx;
      overflow: hidden;
    }
  }
  .shop_list_info{
    padding: 0 30rpx;
    .shop_mingzi {
      margin-bottom: 20rpx;

      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
        text-align: left;
      }
    }
    .shop_list_info_warp{
      height: 60rpx;
      display: flex;
      align-items: center;
      .shop_info_warp_type{
        padding: 0 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 22rpx;
        color: #FF4444;
        border: 2rpx solid #FF4444;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 10rpx;
      }
      .activityNum_evaluate{
        font-size: 22rpx;
        color: #2DB327;
        text-align: center;
        padding: 4rpx 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 10rpx;
      }
      .shop_no_demand{
        font-size: 22rpx;
        color: #999999;
        text-align: center;
        padding: 4rpx 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #E1E1E1;
        margin-left: 10rpx;
      }
      .shop_type{
        background: #FD7C22;color: #FFFFFF;font-size: 24rpx;width: 50rpx;height: 40rpx;text-align: center;line-height: 40rpx;border-radius: 6rpx 0 0 6rpx;
      }
      .place_text{
        min-width: 100rpx;
        height: 36rpx;
        line-height: 36rpx;
        padding: 0 10rpx;
        border: 2rpx solid #FD7C22;
        border-radius: 0 6rpx 6rpx 0;
        color: #FD7C22;
        font-size: 22rpx;
        text-align: center;
      }
    }
  }
}
/* 活动css */
.actives_box {
  background-color: #fff;
  width: 93%;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 auto 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  .tabs_t {
    box-sizing: border-box;
    padding-bottom: 24rpx;
    border-bottom: 1px solid #eee;

    text {
      font-size: 28rpx;
      color: #999;
      margin-left: 52rpx;
      position: relative;
      box-sizing: border-box;
      padding-bottom: 24rpx;

      &:first-child {
        margin-left: 0;
      }

      &:after {
        content: '';
        display: inline-block;
        width: 36px;
        height: 4px;
        border-radius: 20rpx;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.cur {
        color: #FE5414;

        &:after {
          background-color: #FE874B;
        }
      }
    }
  }

  .actives_title{
    position: relative;
    height: 80rpx;
    .actives_title_text{
      margin-bottom: 10rpx;
    }
    .actives-line{
      height: 30rpx;
      position: absolute;
      bottom: 0;
      left: -10rpx;
      right: -10rpx;
      & .actives-line-l{
        width: 30rpx;
        height:30rpx;
        background: #f6f6f6;
        border-radius: 50%;
        position: absolute;
        left: -32rpx;
      }
      & .actives-line-c{
        width: 100%;
        position: absolute;
        left: 0rpx;
        right:0rpx;
        top: 15rpx;
      }
      & .actives-line-r{
        width: 30rpx;
        height:30rpx;
        background: #f6f6f6;
        border-radius: 50%;
        position: absolute;
        right: -32rpx;
      }
    }
  }
  .actives_content{
    margin-top: 20rpx;
    .actives_content_item{
      width: 100%;
      min-height: 60rpx;
      display: flex;
      align-items: center;
      .actives_item_left{
        width: 60rpx;
        font-size: 26rpx;
        color: #888888;
        padding-top: 8rpx;
      }
      .actives_item_right{
        width: calc(100% - 60rpx);
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333333;
        .actives_item_icon{
          width: 32rpx;
          height: 32rpx;
          margin-top: 6rpx;
        }
        .actives_item_text{
          line-height: 40rpx;
          padding: 0 10rpx;
        }
        .actives_open_member{
          width: 100rpx;
          height: 36rpx;
          line-height: 36rpx;
          color: #FFA200;
          border: 2rpx solid #FFA200;
          border-radius: 6rpx;
          padding: 4rpx 10rpx;
          font-size: 24rpx;
        }
      }
    }
    .coupon_box{
      width: 100%;
      height: 116rpx;
      .coupon_box_left{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .coupon_box_left_img{
          width: 32rpx;
          height: 32rpx;
        }
      }
      .coupon_box_right{
        display: flex;
        align-items: center;
        font-size: 24rpx;
      }
    }
  }
  /* 美团绑定手机号 */
  .mt_phone{
    display: flex;
    justify-content: space-between;
    background: #FFF4E6;
    padding: 10rpx;
    border-radius: 16rpx;

  }
  .small_box {
    display: flex;
    box-sizing: border-box;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
    align-items: center;

    .text_t {
      font-size: 28rpx;
      color: #888;
      font-weight: bold;
      display: flex;
      align-items: center;
      width: 22%;

      &:before {
        content: '';
        display: inline-block;
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
      }

      &.fs_icon {
        &:before {
          background: url('https://lsz.lszbg.com/imgs/old/fs_icon.png') no-repeat center center / 100% 100%;
        }
      }

      &.yq_icon {
        &:before {
          background: url('https://lsz.lszbg.com/imgs/old/yq_icon.png') no-repeat center center / 100% 100%;
        }
      }

      &.bt_icon {
        &:before {
          width: 40rpx;
          height: 40rpx;
          background: url('https://lsz.lszbg.com/imgs/old/bt_icon.png') no-repeat center center / 100% 100%;
        }
      }
    }

    .val_text {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;
      flex: 1;
      line-height: 40rpx;
    }

    .price_text {
      font-size: 36rpx;
      color: #FE5414;
      font-weight: bold;
      position: relative;
      top: -3rpx;
      display: flex;
      align-items: center;

      text {
        font-size: 28rpx;
      }
    }

    .vip_text {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;
      margin-right: 26rpx;
      display: flex;
      align-items: center;

      text {
        color: #FE874B;
      }
    }

    .end_text {
      font-size: 24rpx;
      color: #666;
      display: flex;
      align-items: center;
      width: 50%;
    }

    &:last-child {
      border: none;
    }

    .u-line-progress {
      width: 100rpx;
      height: 16rpx;
      border-radius: 100rpx;
      background-color: #FFDECE;
      position: relative;

      .progress {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #FF8548;
        border-radius: 100rpx;
      }
    }
  }
}

/* 会员福利css */
.shop_vip_box{
  margin: 0 auto 20rpx;
  width: 93%;
  display: flex;
  .shop_vip_left{
    width: 45%;
    height: 244rpx;
    background: linear-gradient( 314deg, #FDF4AF 0%, #FFFCED 100%);
    border: 4rpx solid #FFFFFF;
    border-radius: 16rpx;
    position: relative;
    .vip_title{
      padding: 30rpx 20rpx 20rpx;
      font-size: 28rpx;
      color: #3D3D3D;
      height: 40rpx;
      line-height: 40rpx;
    }
    .vip_subTitle{
      font-size: 24rpx;
      color: #666;
      padding: 0rpx 20rpx;
    }
    .vip_btn{
      width: 136rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 24rpx;
      background: linear-gradient( 270deg, #FD7C22 0%, #FFD04E 100%);
      border-radius: 50rpx;
      position: absolute;
      left: 20rpx;
      bottom: 30rpx;
    }
    .vip_icon{
      width: 140rpx;
      height: 128rpx;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
  .shop_vip_right{
    width: 55%;
    height: 250rpx;
    position: relative;
    .shop_vip_right_item{
      border: 4rpx solid #FFFFFF;
      border-radius: 16rpx;
      height: 74rpx;
      position: relative;
      padding: 20rpx;
      .vip_title{
        font-size: 28rpx;
        color: #3D3D3D;
        height: 40rpx;
        line-height: 40rpx;
      }
      .vip_subTitle{
        font-size: 24rpx;
        color: #666;
      }
      .vip_icon{
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        z-index: 1;
      }
    }
    .shop_vip_top{
      margin: 0 0 16rpx 16rpx;
      background: linear-gradient( 270deg, #FFF6F6 0%, #FFE6E6 100%);
    }
    .shop_vip_bottom{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: 16rpx;
      background: linear-gradient( 89deg, #F6FCFF 0%, rgba(219,242,255,0.8) 100%);
    }
  }
}
/* 活动须知css */
.shop_activity_must{
  margin: 0 auto 20rpx;
  width: 93%;
  background: #FFFFFF;
  border-radius: 16rpx;
  .shop_activity_title{
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 86deg, #FC754A 0%, #FEB459 100%);
    border-radius: 0 50rpx 50rpx 0;
  }
  .shop_activity_content{
    padding: 30rpx;
    font-size: 28rpx;
    line-height: 50rpx;
  }
}
/* 报名流程css */
.regist_box{
  padding: 20rpx;
  display: flex;
  background: #FFF4E6;
  height: 40rpx;
  .regist_item{
    display: flex;
    align-items: center;
    .regist_item_icon{
      width: 40rpx;
      height:40rpx;
      padding-right: 10rpx;
    }
    .regist_title{
      font-size: 24rpx;
      color: #333;
    }
  }
  .regist_icon{
    width: 40rpx;
    height: 40rpx;
    padding: 0 10rpx;
  }
}

.bl_box {
  display: flex;
  align-items: center;
  margin-top: 4rpx;

  .val_num {
    font-size: 26rpx;
    color: #FF8548;
    margin-left: 6rpx;
    margin-top: -2px;
    text-align: center;
  }

  .time_text {
    color: #FC7532;
    font-size: 26rpx;
  }

  .u-line-progress {
    width: 100rpx;
    height: 16rpx;
    border-radius: 100rpx;
    background-color: #FFDECE;
    position: relative;

    .progress {
      width: 50%;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #FF8548;
      border-radius: 100rpx;
    }
  }
}

.fensiqun_box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  width: 93%;
  margin: 0 auto;
  z-index: 9;
  position: relative;

  image {
    width: 100rpx;
    height: 100rpx;
  }

  .qun_info {
    padding-left: 14rpx;
    font-size: 28rpx;

    view:nth-child(1) {
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    view:nth-child(2) {
      text {
        color: #FC764A;
      }
    }
  }

  .lijinqun {
    font-size: 28rpx;
    border-radius: 200rpx;
    text-align: center;
    border: 1px solid #FC764A;
    padding: 14rpx 20rpx;
    margin-left: auto;
    color: #FC764A;
  }
}

.lingshi_vip {
  position: relative;
  margin: 30rpx auto;
  width: 93%;
  height: 56px;

  .vip_bg {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .vip_info_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 92%;
    top: 12rpx;
    left: 0;
    right: 0;
    margin: 0 auto;

    .vip_title {
      font-size: 40rpx;
      color: #ffffff;
    }

    .vip_ifno {
      position: relative;
      left: 50rpx;
      color: #ffffff;
      font-size: 28rpx;
      padding-top: 5rpx;
    }

    .vip_kaitong {
      margin-left: auto;
      background-color: #ffffff;
      color: #F97632;
      width: 150rpx;
      height: 65rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 200rpx;
      border: 2px solid #FFE5AA;
      font-size: 24rpx;
    }
  }
}

/* 温馨提示 */

.wenxin {
  width: 93%;
  min-height: 292rpx;
  height: auto;
  background: #ffffff;
  margin: 28rpx auto;
  border-radius: 32.5rpx;
  position: relative;
}

.tishi {
  width: 650rpx;
  min-height: 254rpx;
  height: auto;
  background: #FFFDFC;
  border-radius: 32.5rpx;
  margin: 19rpx 17px;
  padding-bottom: 20rpx;
}

.tishi > view:first-child {
  padding-top: 26rpx;
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  text-align: left;
}

.tishi_bottom {
  width: 100%;
  height: auto;
  margin-top: 14rpx;
  box-sizing: border-box;
  padding: 0 0;
  display: inline-block;
}

.tishi_bottom view {
  width: 100%;
  height: auto;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
  line-height: 25px;
}

.bottomBar {
  position: fixed;
  bottom: 0;
  z-index: 9;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
}
/* 底部报名按钮css */
.bottom-btn-zu {
  padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  display: flex;
  align-items: center;

  .btn-zu1 {
    font-size: 30rpx;
    border: 1px solid #DEDEDE;
    color: #888888;
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    margin: 0 20rpx 0 auto;
  }

  .btn-zu1elm {
    font-size: 30rpx;
    border: 1px solid #33a5fd;
    color: #33a5fd;
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    margin: 0 20rpx 0 auto;
  }

  .btn-zuwrap {
    // margin: 0 auto;
    // width: 60%;
    // margin-right: 40rpx;
  }

  .btn-zu2 {
    flex: 1;
    font-size: 32rpx;
    margin: 0 auto 0 20rpx;
    background: linear-gradient( 270deg, #FD9D54 0%, #FE7B20 100%);
    border-radius: 200rpx;
    padding: 25rpx 36rpx;
    text-align: center;
    color: #ffffff;
    position: relative;

    & .tishi_text {
      box-sizing: border-box;
      position: absolute;
      top: -40rpx;
      left: 60rpx;
      & .tishi_t{
        font-size: 24rpx;
        color: #ffffff;
        padding: 6rpx 10rpx;
        text-align: center;
        position: absolute;
        z-index: 1;
      }
      & .tishi_bg{
        width: 280rpx;
        height: 56rpx;
      }
    }
  }

  .btn-zuelm {
    flex: 1;
    font-size: 30rpx;
    margin: 0 auto 0 20rpx;
    background: linear-gradient(to right, #4bb0ff, 50%, #8ac7f8);
    border-radius: 200rpx;
    padding: 25rpx 36rpx;
    text-align: center;
    color: #ffffff;
    position: relative;

    & .tishi_text {
      box-sizing: border-box;
      position: absolute;
      top: -40rpx;
      left: 60rpx;
      & .tishi_t{
        font-size: 24rpx;
        color: #ffffff;
        padding: 6rpx 10rpx;
        text-align: center;
        position: absolute;
        z-index: 1;
      }
      & .tishi_bg{
        width: 280rpx;
        height: 56rpx;
      }
    }
  }

  .btn-zu3 {
    margin: 0 auto;
    font-size: 30rpx;
    background: linear-gradient(to right, #999, 50%, #999);
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    color: #ffffff;
    width: 100%;
  }
}
.wm_box {
  position: relative;
  width: 600rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32.5rpx;
}

.content_boxs {
  box-sizing: border-box;
  position: relative;

  .know_t {
    font-size: 32rpx;
    color: #000;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }

  .btns_box {
    width: 280rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }

  .btns_cancel {
    width: 200rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #d2d2d2 0%, #a2a0a0 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }
}

.desc_text {
  box-sizing: border-box;
  padding: 30rpx 30rpx 0;
  font-size: 30rpx;
  color: #AAAAAA;
  line-height: 56rpx;
  text-align: left;

  text {
    color: #F97632;
    text-align: left;
  }
}

.qd-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    border-top: #F3F3F3 1px solid;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }

  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-bottom: #F3F3F3 solid 1px;
  }

  .tip {
    margin: 20rpx 38rpx 0;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .tip1 {
    color: #FF3E00;
  }
}

/* 微信H5分享提示图片css */
.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
}
.share_box_shadow image {
  max-width: 80%;
  margin: 10%;
}
/* 按钮分享弹窗css */
.share_box {
  box-sizing: border-box;
  background: linear-gradient( 177deg, #FDEECF 1%, #FFF7E4 75%);
  border-radius: 32rpx 32rpx 0 0;
  height: 700rpx;
  overflow: hidden;
  .text {
    font-size: 28rpx;
    color: #333;
  }
  .share_top{
    width: 100%;
    height: 480rpx;
    padding-bottom: 40rpx;
    position: relative;
    // background: #FFF7E4;

    .share_top_bg{
      width: 100%;
    }
    .share_top_warp{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 30rpx 40rpx;
      .share_top_warp_title{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #222222;
        text-align: center;
        margin: 10rpx 0;
      }
      .share_top_warp_subtitle{
        height: 50rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        text-align: center;
      }
      .share_top_warp_content{
        width: 100%;
      }
    }
  }
  .wechat_box {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 30rpx 0;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0 0;
    .small_box {
      flex: 1;
      .complete1 {
        text-align: center;
        background: none;
        border: none;
      }
      & button:after {
        border: none;
        background: none;
      }
      .icon {
        width: 64rpx;
        height: 64rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 26rpx;
        color: #333;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }
  }
}
</style>
